// Links
//
// Style guide: app.atoms.link

// Base link
//
// Link styling by default.
//
// Markup: link.hbs
//
// :hover - Change the link when hovered
// .link-hover - Change the link when hovered
// 
// Style guide: app.atoms.link.base
a,
.link {
    text-decoration: none;
    color: $absolutezero;

    &:hover, &-hover {
        color: $greenblue;
    }
}

// Menu link
//
// Menu link styling.
//
// Markup: link_menu.hbs
//
// :hover - Change the menu link when hovered
// .menu-link--hover - Change the menu link when hovered
//
// Style guide: app.atoms.link.menu
.menu-link {
    color: $eerieblack;
    &:hover, &--hover {
        color: $greenblue;
    }
}

// Documentation link
//
// Documentation link styling.
//
// Markup: link_doc.hbs
//
// Style guide: app.atoms.link.menu
.documentation-link {
    border: 1px solid $coconut;
    border-radius: 5px;
    color: $absolutezero;
    display: block;
    padding: em(4) 0;
    text-align: center;

    background-color: $coconut;
    @include linear-gradient(to bottom, $coconut 90%, $granitegray);

    @include media($breakpoint-xs) {
        @include span-columns(2 of 2);
    }
    @include media($breakpoint-s) {
        @include span-columns(2 of 4);
        @include shift(1);
    }
    @include media($breakpoint-m) {
        @include span-columns(2);
        @include shift(3);
    }
    @include media($breakpoint-l) {
        @include span-columns(3);
        @include shift(3);
    }
    @include media($breakpoint-xl) {
        @include span-columns(6);
        @include shift(3);
    }
    @include media($breakpoint-xxl) {
        @include span-columns(3);
        @include shift(3);
    }

}